<template>
  <el-form :model="addForm" ref="addFormRef" :label-position="language == 'zh' ? 'right' : 'top'" label-width="100px" :rules="rules" size="small">
    <el-form-item :label="t('dimensionManage.dnameText')" prop="dname" required="true">
      <el-input v-model="addForm.dname" maxlength="50" show-word-limit :style="{'width':'100%'}"></el-input>
    </el-form-item>
    <el-form-item :label="t('dimensionManage.remarks')" prop="remarks">
      <el-input type="textarea" v-model="addForm.remarks" maxlength="150" show-word-limit :style="{'width':'100%'}"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
import { getRules } from "@/util/regx";
import { mapGetters } from "vuex";

export default {
  props: {
    type: {
      type: String,
      required: true,
      default: "add",
    },
    curDimension: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    ...mapGetters(["language"]),
  },
  data() {
    return {
      addForm: {},
      rules: {
        dname: [
          { required: true, message: this.$t("dimensionManage.dnameRequiredText"), trigger: ["blur","change"] },
          ...getRules(["charNumHan"]),
        ],
      },
    };
  },
  mounted() {
    if (this.type === "edit") {
      this.addForm = {
        dname: this.curDimension.dname,
        remarks: this.curDimension.remarks,
        id: this.curDimension.id,
      };
    }
  },
  methods: {
    submitForm() {
      this.$refs.addFormRef.validate((valid) => {
        if (valid) {
          // 表单验证通过，提交表单数据
          console.log('提交数据:', this.addForm);
          // 假设这里有一个 API 调用
          // this.submitApi(this.addForm).then(() => {
          //   this.$message.success('提交成功');
          // });
        } else {
          console.error('表单验证失败');
        }
      });
    },
    t(key) {
      return this.$t(key);
    }
  },
};
</script>

<style>
/* 你可以在这里添加一些样式 */
</style>
